<template>
    <div class="warp">
        <div class="section">
            <h3>系统设置</h3>
            <div class="content">
                <div class="portrait">
                    <label>头  像：</label>
                    <div>
                        <img :src="userAvatar"/>
                    </div>
                </div>
                <div>
                    <label>职  称：</label>
                    <p>{{academicTitle}}</p>
                </div>
                <div>
                    <label>校园网账号：</label>
                    <p>{{mobile}}</p>
                </div>
                <div>
                    <label>账号密码设置：</label>
                    <p>
                        <el-button size="mini" @click="dialogVisible=true">修改密码</el-button>
                    </p>
                </div>
            </div>
            <div class="logout">
                <el-button type="primary" @click="logout('login')" round>退出登录</el-button>
            </div>
        </div>
        <div class="background">
            <img src="../../assets/background.png">
        </div>



         <el-dialog title="修改密码" :visible.sync="dialogVisible" width="40%">

            <el-form class="modifyPassowrdForm" :model="modifyPassowrdForm" label-width="80px" autocomplete="off">
               <el-form-item label="原密码">
                  <el-input v-model="modifyPassowrdForm.oldPassword" type="password" size="mini" autocomplete="off"></el-input>
               </el-form-item>
               <el-form-item label="新密码">
                  <el-input v-model="modifyPassowrdForm.newPassword" type="password" size="mini"></el-input>
               </el-form-item>
               <el-form-item label="确认密码">
                  <el-input v-model="modifyPassowrdForm.confirmPassword" type="password" size="mini"></el-input>
               </el-form-item>

               <div style="margin-top:10px">
                  <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                  <el-button ref="modifyPasswordSubmitButton" type="primary" @click="modifyPassword()" size="mini">修 改</el-button>
               </div>

            </el-form>
         </el-dialog>

    </div>

</template>

<script>
    import {queryInfoByIdGet,updatePasswordGet} from '@/service/api'
    export default {
         name: "Settings",
         data() {
               return {
                  dialogVisible:false,
                  modifyPassowrdForm:{
                     oldPassword:"",
                     newPassword:"",
                     confirmPassword:"",
                  },

                  userAvatar:require("../../assets/home/avatar.png"),
                  mobile:'',
                  academicTitle:"",
               }
         },
         created() {
            let userHeader = localStorage.getItem("userHeader");
            if(userHeader !== null){
               this.userAvatar = userHeader;
            }
            this.getUserInfo()
         },
         methods:{
               logout(url) {
                  localStorage.removeItem('REVIEW-TOKEN');
                  this.$router.replace(url);
               },
               getUserInfo() {
                  queryInfoByIdGet().then(res => {
                     if (res.code == 200) {
                        console.log(res)
                           this.mobile = res.data.mobile;
                           this.academicTitle = res.data.academicTitle;
                     } else {
                           console.log(res)
                     }
                  });
               },
               // 修改密码
               modifyPassword(){

                  if(this.modifyPassowrdForm.oldPassword.length <= 0){
                     this.$message.error("请输入原密码");
                     return;
                  }
                  if(this.modifyPassowrdForm.newPassword.length <= 0){
                     this.$message.error("请输入新密码");
                     return;
                  }
                  if(this.modifyPassowrdForm.confirmPassword.length <= 0){
                     this.$message.error("请输入确认密码");
                     return;
                  }
                  if(this.modifyPassowrdForm.newPassword !== this.modifyPassowrdForm.confirmPassword){
                     this.$message.error("两次新密码输入不一致");
                     return;
                  }

                  var that = this;
                  that.$refs.modifyPasswordSubmitButton.loading = true;
                  updatePasswordGet(this.modifyPassowrdForm).then(res => {
                     if (res.code == 200) {
                        that.dialogVisible = false;
                        this.$message({message: '修改成功！',type: 'success'});
                     }
                  }).finally(function () {  
                     that.$refs.modifyPasswordSubmitButton.loading = false;
                  });
                  
               },
         }
    }
</script>

<style scoped>
    .warp{
        width: 100%;
        height: 100%;
        /*overflow: hidden;*/
        position: relative;
    }

    .background{
        position: absolute;
        width: 100%;
        left: 0px;
        bottom: -20px;
        text-align: center;
        z-index: 0;
    }
    .background>img{
        width: 100%;
        opacity: 0.4;
        margin-bottom: -10px;
    }

    .section {
        width: 620px;
        height: 400px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        top: 280px; /*偏移*/
        transform: translateY(-50%);
        z-index: 1;
    }
    .section h3{
        font-size: 20px;
        color: #333;
        font-weight: bold;
        margin: 20px auto;
        text-align: center;
    }
    .content{
        width:540px;
        height:220px;
        border:1px solid rgba(228,234,236,1);
        margin: 0 auto;
        border-radius: 5px;
    }
    .content > div{
        display: flex;
        align-items: center;
        height: 54px;
        border-bottom: 1px solid rgba(228,234,236,1);
    }
    .content > div:nth-of-type(odd){
        background: #F5F8FE;
    }
    .content > div:last-child{
        border: none;
    }
    .content label{
        width: 50%;
        height: 100%;
        line-height: 54px;
        display: block;
        text-align: center;
        font-size: 14px;
        border-right: 1px solid #E4EAEC;
    }
    .portrait > div{
        width: 50%;
    }
    .portrait > div img{
        display: block;
        width: 36px;
        height: 36px;
        margin: 0 auto;
        border-radius: 50%;
    }
    .content p{
        width: 50%;
        color: #333;
        font-size: 14px;
        text-align: center;
    }
    .logout{
        margin: 30px auto 0;
        text-align: center;
    }
    .logout >>> .el-button{
        width:110px;
        background:rgba(49,71,143,1);
        box-shadow:0px 9px 18px 2px rgba(43,103,254,0.2);
    }



    .modifyPassowrdForm{
         margin: 0 auto;
         width: 70%;
         display: flex;
         flex-direction:column;
         align-items: center;
    }
    .modifyPassowrdForm>.el-form-item{
       width:90%;
    }
</style>
